<template>
  <div class="topnav-content" >
    <Tree id="custom-device-tree"
          :data="deviceData"
          :load-data="loadData"
          :select-node="selectNode"
          @on-select-change="changeNode" expand-node ></Tree>
<!--    :load-data="loadData"-->
  </div>
</template>
<script>
import Device from '@/api/Device';
import {apiResult} from "@/libs/util";
export default {
  name: "TestTree",
  data(){
    return{
      api: new Device(),
      deviceData:[],
      selectNode: false
    }
  },

  methods:{
    top(){
      const that = this;
      this.api.findDeviceForOrgTree({}).then(res=>{
          apiResult(res.data,false,result=>{
            this.deviceData = that.resoleData(result.data);
          })

      });
    },

    loadData(item, callback){
      const that = this;
      console.log("item: %o",item);
      let param = {id:item.id};
      this.loading = true;
      //console.log(param);
      this.api.findDeviceForOrgTree(param).then(res=>{
          apiResult(res.data,false,result=>{
            callback(that.resoleData(result.data));
          },err=>{
            this.loading = false;
          })
      });
    },
    /**
     * 数据转换
     * @param originList  原数据
     */
    resoleData(originList){
      let target = [];
      if (!!originList){
        for(let i in originList){
          let data = new Object();
          data.id=originList[i].id;
          data.title=originList[i].title;
          data.type=originList[i].type;
          if (data.type == "chn"){
            data.online = originList[i].online;
          }

          if (!(originList[i].children == null || originList[i].children==undefined)){
            data.loading=false;
            data.children=[];
          }
          if (!(originList[i].arrt == null || originList[i].arrt==undefined)){
            data.arrt=originList[i].arrt;
          }
          target.push(data);
        }

      }
      return target;
    },
    changeNode(nodes,node){
      /** 这个方法没起作用了*/
      this.$emit('on-select-change', node, node);
    },

  },

  mounted() {
    this.top();
  }
}
</script>

<style lang="less" >
  @import "./topnav";
</style>
